<script setup lang='ts' name="category-expan">
import { toRefs } from 'vue'

const props = defineProps<{
    data: any
}>()
const emits = defineEmits(['itemClick'])
const { data } = toRefs(props)

const getData = computed(() => ({
    ...data.value?.children,
}))

function clickHandle(item: any) {
    emits('itemClick', item)
}
</script>

<template>
    <div class="category-box p-30 rounded-4 absolute h560 w-1068 left-232 top-0 z-2">
        <el-row v-for="(item, index) in getData"
                :key="index"
                class="mb-30"
        >
            <el-col :span="3"
                    class="!flex"
            >
                <el-tooltip :disabled="item.categoryName.length < 9"
                            effect="light"
                            :content="item.categoryName"
                            placement="top"
                >
                    <div class="item_title pr-10 text-16 c-#1D2129 font-600 text-ellipsis flex w-125 cursor-pointer ws-nowrap of-hidden justify-between items-center !inline-block"
                         @click="clickHandle(item)"
                    >
                        {{ item.categoryName }}
                    </div>
                </el-tooltip>
            </el-col>

            <el-col :span="21"
                    class="flex-wrap items-center !flex"
            >
                <el-col v-for="ite in item.children"
                        :key="`${ite.cid}-${index}`"
                        class="mb-10 c-#767676"
                        :span="4"
                >
                    <el-tooltip :disabled="ite.categoryName.length < 9"
                                effect="light"
                                :content="ite.categoryName"
                                placement="top"
                    >
                        <div class="item_title pr-10 text-14 c-#767676 text-ellipsis flex w-125 cursor-pointer ws-nowrap of-hidden justify-between items-center !inline-block"
                             @click="clickHandle(ite)"
                        >
                            {{ ite.categoryName }}
                        </div>
                    </el-tooltip>
                </el-col>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="less" scoped>
.category-box {
    overflow: hidden scroll;
    // background: rgb(247 247 247 / 80%);
    background: #fff;
}

/* 自定义整个滚动条 */
.category-box::-webkit-scrollbar {
    width: 4px;
}

/* 自定义滚动条轨道 */
.category-box::-webkit-scrollbar-track {
    // background: #f1f1f1;
}

/* 自定义滚动条的滑块（thumb） */
.category-box::-webkit-scrollbar-thumb {
    background: #dcdfe6;
    border-radius: 2px;
}

/* 当滑块悬停或活动时，可以添加更多样式 */
.category-box::-webkit-scrollbar-thumb:hover {
    // background: #555;
}

.item_title {
    &:hover {
        color: red;
    }

    .el-icon {
        color: inherit;
    }
}
</style>
